//Global line type to be access throughout the script
var lineType = 0;

//Maximum numbers of lines to animate
const NUMBER_OF_LINES = 12;

//Let's even out the 4 colors so they dont repeat that often
//This will keep track of the amount of different color lines
var NUMBER_OF_RED = 0;
var NUMBER_OF_GREEN = 0;
var NUMBER_OF_BLUE = 0;
var NUMBER_OF_YELLOW = 0;

//Max re-randomize to prevent dead loop
const MAX_RERANDOM = 30

//Let's keep track of all the position of the lines
var positionH=new Array();
var positionV=new Array();

//Let's keep track too the previous created color
var lastColor = 0;

function init()
{
	var container;
	
	for (var i = 0; i <= NUMBER_OF_LINES; i++) 
	{
		lineType = randomInteger(1, 3);
		
		if(lineType == 1){
			container = document.getElementById('linesContainerH');
			container.appendChild(createALine());
		} else {
			container = document.getElementById('linesContainerV');
			container.appendChild(createALine());
		}	
	}
}

function randomInteger(low, high)
{
    return low + Math.floor(Math.random() * (high - low));
}

function randomFloat(low, high)
{
    return low + Math.random() * (high - low);
}

function pixelValue(value)
{
    return value + 'px';
}

function durationValue(value)
{
    return value + 's';
}

function createALine()
{
    var lineDiv = document.createElement('div');
    var image = document.createElement('img');
    var lineStyle = 0;
	var loop;
	var reRandom = true;
	var ranPosition = 0;
	var retries = 0;

	do {
		if(lineType == 1) lineStyle = randomInteger(11, 19); 
		else lineStyle = randomInteger(1, 9); 
		
		if(lastColor != lineStyle) 
		{
			if((lineStyle == 1 || lineStyle == 5 || lineStyle == 11 || lineStyle == 15) && (NUMBER_OF_BLUE+1 <= Math.ceil(NUMBER_OF_LINES/4))) 
			{
				NUMBER_OF_BLUE++;
				reRandom = false;
			}
			else if((lineStyle == 2 || lineStyle == 6 || lineStyle == 12 || lineStyle == 16) && (NUMBER_OF_GREEN+1 <= Math.ceil(NUMBER_OF_LINES/4))) 
			{
				NUMBER_OF_GREEN++;
				reRandom = false;
			}
			else if((lineStyle == 3 || lineStyle == 7 || lineStyle == 13 || lineStyle == 17) && (NUMBER_OF_RED+1 <= Math.ceil(NUMBER_OF_LINES/4))) 
			{
				NUMBER_OF_RED++;
				reRandom = false;
			}
			else if((lineStyle == 4 || lineStyle == 8 || lineStyle == 14 || lineStyle == 18) && (NUMBER_OF_YELLOW+1 <= Math.ceil(NUMBER_OF_LINES/4))) 
			{
				NUMBER_OF_YELLOW++;
				reRandom = false;
			}
		}
		retries++;
    } while(reRandom && retries <= MAX_RERANDOM);
	
	image.src = 'images/line' + lineStyle + '.png';
	
	retries = 0;
	do {
		reRandom = false;
		
		if(lineStyle >= 1 && lineStyle <= 8) 
		{
			ranPosition = randomInteger(2, 31)*10-3;
			for(loop=1;loop<=positionV.length;loop++)
			{
				if(positionV[loop] <= ranPosition+20 && positionV[loop] >= ranPosition-20) reRandom = true;
			}
		}
		else if(lineStyle >= 11 && lineStyle <= 18) 
		{
			ranPosition = randomInteger(2, 47)*10-3;
			for(loop=1;loop<=positionH.length;loop++)
			{
				if(positionH[loop] <= ranPosition+30 && positionH[loop] >= ranPosition-30) reRandom = true;
			}
		}
		retries++;
    } while(reRandom && retries <= MAX_RERANDOM);

	if(lineStyle >= 1 && lineStyle <= 8) positionV[positionV.length+1] = ranPosition;
	else if(lineStyle >= 11 && lineStyle <= 18) positionH[positionH.length+1] = ranPosition;
	
	if(lineStyle >= 1 && lineStyle <= 4)
	{
		lineDiv.style.top = pixelValue(randomInteger(480, 560));
		lineDiv.style.left = pixelValue(ranPosition);
		lineDiv.style.webkitAnimationName = 'downup';
		lineDiv.style.webkitAnimationDuration = durationValue(randomInteger(8, 13));
	}
	else if(lineStyle >= 5 && lineStyle <= 8)
	{
		lineDiv.style.top = pixelValue(randomInteger(-270, -190));
		lineDiv.style.left = pixelValue(ranPosition);
		lineDiv.style.webkitAnimationName = 'updown';
		lineDiv.style.webkitAnimationDuration = durationValue(randomInteger(8, 13));
	}
	else if(lineStyle >= 11 && lineStyle <= 14)
	{
		lineDiv.style.top = pixelValue(ranPosition);
		lineDiv.style.left = pixelValue(randomInteger(-270, -190));
		lineDiv.style.webkitAnimationName = 'leftright';
		lineDiv.style.webkitAnimationDuration = durationValue(randomInteger(4, 9));
	}
	else if(lineStyle >= 15 && lineStyle <= 18)
	{
		lineDiv.style.top = pixelValue(ranPosition);
		lineDiv.style.left = pixelValue(randomInteger(320, 400));
		lineDiv.style.webkitAnimationName = 'rightleft';
		lineDiv.style.webkitAnimationDuration = durationValue(randomInteger(4, 9));
	}
	
    lineDiv.appendChild(image);
	lastColor = lineStyle;
    return lineDiv;
}

window.addEventListener('load', init, false);

